<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>考鼎码在线练习场</title>
  <link rel="stylesheet" href="bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
  <link rel="stylesheet" href="bootstrap-icons@1.11.3/font/bootstrap-icons.css">
  <link rel="stylesheet" href="codemirror-5.65.18/lib/codemirror.css">
  <link rel="stylesheet" href="codemirror-5.65.18/theme/solarized.css">
  <link rel="stylesheet" href="css/playground.css">
</head>

<body>

  <div class="modal fade" id="promptModal" tabindex="-1" aria-labelledby="promptModalLabel">
      <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5">提醒一下</h1>
            <button type="button" class="btn-close" id="promptModalClose" data-bs-dismiss="modal" aria-label="关闭"></button>
          </div>
          <div class="modal-body">
            <p class="lead text-danger" id="promptModalMsg">提醒信息</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">知道啦</button>
          </div>
        </div>
      </div>
  </div>

  <div class="modal fade" id="codeInfoModal" tabindex="-1" aria-labelledby="codeInfoModalLabel">
      <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5">程序信息</h1>
            <button type="button" class="btn-close" id="codeInfoModalClose" data-bs-dismiss="modal" aria-label="关闭"></button>
          </div>
          <div class="modal-body">
            <dl class="row">
              <dt class="col-sm-3">程序作者</dt>
              <dd class="col-sm-9" id="codeInfoUsername"></dd>

              <dt class="col-sm-3">程序分组</dt>
              <dd class="col-sm-9" id="codeInfoSection"></dd>

              <dt class="col-sm-3">程序标题</dt>
              <dd class="col-sm-9" id="codeInfoTitle"></dd>

              <dt class="col-sm-3">程序描述</dt>
              <dd class="col-sm-9" id="codeInfoDescription"></dd>

              <dt class="col-sm-3">分享时间</dt>
              <dd class="col-sm-9" id="codeInfoCreatedAt"></dd>

              <dt class="col-sm-3">修改时间</dt>
              <dd class="col-sm-9" id="codeInfoUpdatedAt"></dd>
            </dl>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">知道啦</button>
          </div>
        </div>
      </div>
  </div>
  <div class="modal fade" id="shareModal" tabindex="-1" aria-labelledby="shareModalLabel">
      <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5">分享</h1>
            <button type="button" class="btn-close" id="shareModalClose" data-bs-dismiss="modal" aria-label="关闭"></button>
          </div>
          <div class="modal-body">
            <form id="shareModalForm" action="javascript:shareProgram()">
              <div id="shareModalNewUserFields">
                <div class="mb-3">
                  <label class="form-label" for="shareModalStudentName" id="forShareModalStudentName">学生姓名</label>
                  <input type="text" class="form-control" id="shareModalStudentName" name="username"
                        required minlength="2" maxlength="64" autocomplete="off"
                        placeholder="至少两个字符；如：任盈盈"
                        aria-label="学生姓名" aria-describedby="forShareModalStudentName" />
                </div>
                <div class="mb-3">
                  <label class="form-label" for="shareModalParentName" id="forShareModalParentName">家长姓名/手机号后四位（兼做密码）</label>
                  <input type="text" class="form-control" id="shareModalParentName" name="password"
                        required minlength="6" maxlength="64" autocomplete="off"
                        placeholder="至少六个字符；如：任我行8888" aria-label="家长姓名" aria-describedby="forShareModalParentName" />
                  <div class="form-text">以上信息在首次分享时填写；若更换浏览器，请务必输入相同内容。</div>
                </div>
              </div>

              <div class="mb-3">
                <label class="form-label" id="forShareModalProgramSection" for="shareModalProgramSection">程序分类</label>
                <input type="text" class="form-control" name="section" id="shareModalProgramSection" required minlength="4" maxlength="128"
                    placeholder="至少四个字符；如：数论基础" aria-label="程序分类" aria-describedby="forShareModalProgramSection" />
              </div>
              <div class="mb-3">
                <label class="form-label" id="forShareModalProgramTitle" for="shareModalProgramTitle">程序标题</label>
                <input type="text" class="form-control" name="title"  id="shareModalProgramTitle" required minlength="4" maxlength="128"
                    placeholder="至少四个字符；如：欧几里得算法" aria-label="程序标题" aria-describedby="forShareModalProgramTitle" />
              </div>
              <div class="mb-3">
                <label class="form-label" id="forShareModalProgramDesc" for="shareModalProgramDesc">程序描述</label>
                <input type="text" class="form-control" name="description" id="shareModalProgramDesc" maxlength="256"
                    placeholder="可不填；如：本程序是欧几里得算法的迭代实现" aria-label="程序描述" aria-describedby="forShareModalProgramDesc" />
                <div class="form-text" id="shareModalPromptUpdate">此程序已分享；将使用以上信息和当前程序更新已分享的内容。</div>
              </div>
            </form>

            <div class="lead mb-3 text-danger" id="shareModalErrorMsg" style="display:none;">错误信息</div>
          </div>    <!-- modal-body -->

          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            <button type="submit" class="btn btn-primary" id="shareModalSubmit" form="shareModalForm">提交</button>
          </div>
        </div>
      </div>
  </div>

  <div class="modal fade" id="helpModal" tabindex="-1" aria-labelledby="helpModalLabel">
      <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5">帮助</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
          </div>
          <div class="modal-body mx-5">
            <h4 class="my-3">主要界面</h4>
            <p>可执行考鼎码练习场主要包括如下界面：</p>
            <dl class="row px-3">
              <dt class="col-sm-3">编辑区</dt>
              <dd class="col-sm-9">用于编写程序；在编辑区点击鼠标左键或者按 Tab 键将显示常见关键词或者全局函数的快捷输入菜单，再次按 Tab 键将隐藏该菜单。</dd>
              <dt class="col-sm-3">工具栏</dt>
              <dd class="col-sm-9">位于编辑区上侧，点击相应的工具图标将执行相应功能；具体描述见下。</dd>
              <dt class="col-sm-3">输出面板</dt>
              <dd class="col-sm-9">点击”运行“图标后从右侧推出，用于展示程序的执行结果。</dd>
              <dt class="col-sm-3">仓库面板</dt>
              <dd class="col-sm-9">点击”仓库“图标后从左侧推出，可选择社区代码仓库中的程序插入到编辑区的当前编辑位置，亦可删除自己的程序。</dd>
            </dl>

            <h4 class="my-3">工具栏功能</h4>
            <div class="d-flex flex-column bg-secondary-subtle">
                <div class="d-flex m-2 p-2 align-items-center justify-content-between border border-primary-subtle bg-secondary-subtle">
                  <div class="text-bg-dark px-3" style="min-width:64px">
                    <i class="bi bi-box-seam d-block mx-auto mb-1 cmd-icon"></i>
                    仓库
                  </div>
                  <div class="mx-3">
                    <p>展示社区程序仓库，可导入老师以及其他同学分享到社区的程序到编辑区，亦可管理自己分享的程序；点击此工具将推出”仓库“面板，请在该面板中选择程序导入。</p>
                  </div>
                </div>

                <div class="d-flex m-2 p-2 align-items-center justify-content-between border border-primary-subtle bg-secondary-subtle">
                  <div class="text-bg-dark px-3" style="min-width:64px">
                    <i class="bi bi-caret-right-fill d-block mx-auto mb-1 cmd-icon"></i>
                    运行
                  </div>
                  <div class="mx-3">
                    <p>执行当前编辑区中的代码，同时会从右侧推出输出区；请在输出区查看程序中的错误或者执行的结果。程序在运行时，该按钮会切换为停止功能；若遇到死循环等情形，可点击停止按钮强制终止程序的运行。</p>
                  </div>
                </div>

                <div class="d-flex m-2 p-2 align-items-center justify-content-between border border-danger bg-secondary-subtle">
                  <div class="text-bg-dark px-3" style="min-width:64px">
                    <i class="bi bi-eraser-fill d-block mx-auto mb-1 cmd-icon"></i>
                    清空
                  </div>
                  <div class="mx-3">
                    <p>清空当前编辑器中的所有内容。若意外清空，可在编辑区中立即输入 Ctrl+Z 或 Cmd+Z 组合键恢复。</p>
                  </div>
                </div>

                <div class="d-flex m-2 p-2 align-items-center justify-content-between border border-danger bg-secondary-subtle">
                  <div class="text-bg-dark px-3" style="min-width:64px">
                    <i class="bi bi-info-circle d-block mx-auto mb-1 cmd-icon"></i>
                    信息
                  </div>
                  <div class="mx-3">
                    <p>展示当前加载的程序之作者、分组、标题、描述等信息。</p>
                  </div>
                </div>

                <div class="d-flex m-2 p-2 align-items-center justify-content-between border border-primary-subtle bg-secondary-subtle">
                  <div class="text-bg-dark px-3" style="min-width:64px">
                    <i class="bi bi-download d-block mx-auto mb-1 cmd-icon"></i>
                    保存
                  </div>
                  <div class="mx-3">
                    <p>将当前编辑区中的程序保存到本地文件系统；默认使用 <code>ec2</code> 后缀名。</p>
                  </div>
                </div>

                <div class="d-flex m-2 p-2 align-items-center justify-content-between border border-primary-subtle bg-secondary-subtle">
                  <div class="text-bg-dark px-3" style="min-width:64px">
                    <i class="bi bi-cloud-upload d-block mx-auto mb-1 cmd-icon"></i>
                    分享
                  </div>
                  <div class="mx-3">
                    <p>将当前编辑区中的程序分享出去；请根据弹框提示输入作者姓名、算法名称等。分享后的程序将列在”仓库“面板中”我的“条目之下，复制程序链接可分享给其他人查看。</p>
                  </div>
                </div>

                <div class="d-flex m-2 p-2 align-items-center justify-content-between border border-primary-subtle bg-secondary-subtle">
                  <div class="text-bg-dark px-3" style="min-width:64px">
                    <i class="bi bi-question-circle d-block mx-auto mb-1 cmd-icon"></i>
                    帮助
                  </div>
                  <div class="mx-3">
                    <p>展示本页面，提供帮助信息。</p>
                  </div>
                </div>

                <div class="d-flex m-2 p-2 align-items-center justify-content-between border border-primary-subtle bg-secondary-subtle">
                  <div class="text-bg-dark px-3" style="min-width:64px">
                    <i class="bi bi-people-fill d-block mx-auto mb-1 cmd-icon"></i>
                    关于
                  </div>
                  <div class="mx-3">
                    <p>展示关于模态框，展示有关本项目开发人员、赞助人等的信息。</p>
                  </div>
                </div>
            </div>

            <h4 class="my-3">参考链接</h4>
            <ul class="px-3">
                <li><a href="https://courses.fmsoft.cn/plzs/enlightenment-spec-of-executable-coding-code.html" target="_blank">EC2 规范</a></li>
                <li><a href="https://gitlab.fmsoft.cn/explore/snippets" target="_blank">社区分享</a></li>
            </ul>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
          </div>
        </div>
      </div>
  </div>

  <div class="modal fade" id="aboutModal" tabindex="-1" aria-labelledby="aboutModalLabel">
      <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5">关于可执行考鼎码在线练习场</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
          </div>
          <div class="modal-body mx-5">
            <h4 class="display-4 my-3">可执行考鼎码</h4>
            <p>可执⾏考⿍码（Executable Coding Code，EC2）是⼀种主要⽤于少⼉信息学启蒙的编程语⾔，由<a href="https://www.fmsoft.cn" target="_blank" rel="noopener">飞漫软件</a>青少年信息学教育板块（考鼎学堂）主讲老师<a href="https://www.fmsoft.cn/about/founder" target="_blank" rel="noopener">魏永明</a>设计。</p>

            <div class="card mb-3">
              <div class="row g-0">
                <div class="col-md-3 text-center">
                  <img src="assets/qrcode-wechat-enterprise-lee.png" width="200" class="rounded" alt="扫码添加班主任李老师企业微信报名">
                </div>
                <div class="col-md-9">
                  <div class="card-body">
                    <h5 class="card-title">《信息学启蒙课》介绍</h5>
                    <p class="card-text">本课程面向小学三年级或以上阶段的信息学特长生开设。内容主要围绕学习信息学（计算机科学）而必须掌握的知识准备，内容涉及进制的概念、算法的概念、数论基础、实数和函数、递推迭代及递归、初等代数和欧式几何、组合数学、图和图论、基础数据结构、基础算法等十个单元。学生从简单的算术和代数知识学起，在理解算法的基本概念后，使用中文编程语言书写简单的算法程序，从而可让孩子在理解数学知识点的同时，掌握计算机科学的相关基础知识，从而为进一步学习信息学奥林匹克竞赛相关内容的学习打下坚实基础。</p>
                    <p class="card-text"><small class="text-muted"><span class="text-primary">☜</span>扫码添加班主任企业微信抢免费学习资格</small></p>
                  </div>
                </div>
              </div>
            </div>

            <div class="card mb-3">
              <div class="row g-0">
                <div class="col-md-3 text-center">
                  <img src="assets/qrcode-wechat-channel-codingcollege.png" width="200" class="rounded" alt="扫码关注“考鼎学堂”视频号">
                </div>
                <div class="col-md-9">
                  <div class="card-body">
                    <h5 class="card-title">主讲人介绍</h5>
                    <p class="card-text">魏永明，清华大学精仪系机械制造专业毕业，研究生学历，工学硕士学位，飞漫软件创始人，2013 年度“开源软件杰出贡献人物”，2023 年度世界开源贡献榜 Top100 人物。1999 年发布了知名开源软件 MiniGUI 并持续研发至今。其主要著作有《C 语言最佳实践》、《MiniGUI 剖析》、《Linux 实用教程》、《Linux 设备驱动程序》（二、三版）等。2020 年 8 月，魏永明提出世界首款可编程标记语言 HVML；2024 年 12 月，提出面向少儿信息学启蒙的编程语言可执行考鼎码。2023 年，HVML 项目入选国际测试委员会年度世界开源 Top100 榜单。</p>
                    <p class="card-text"><small class="text-muted"><span class="text-primary">☜</span>扫码关注“考鼎学堂”视频号</small></p>
                  </div>
                </div>
              </div>
            </div>
            <p>本项目实现了 EC2 的在线练习场。项目使用 WASM 技术实现 EC2 的解释器及运行时，使用 CodeMirror 编辑器实现了代码的编辑和语法高亮等功能，并使用 Bootstrap 作为前端框架，后端使用 PHP 和 GitLab。</p>
            <h4 class="mb-3">源代码仓库</h4>
            <p>本项目的源代码仓库托管在如下站点：
            <ul>
              <li><a href="https://github.com/VincentWei/ec2playground" target="_blank">GitHub</a></li>
              <li><a href="https://gitee.com/vincentwei7/ec2playground" target="_blank">Gitee</a></li>
            </ul>
            <h4 class="mb-3">开发者</h4>
            <p>本项目的解释器及编辑器的开发和定制工作由编程语言<a href="https://losu.tech" target="_blank">洛书</a>开发团队完成：</p>
            <ul>
              <li><a href="https://gitee.com/cthree2004" target="_blank">CHEN Chaochen</a></li>
              <li><a href="https://gitee.com/matriller" target="_blank">CHENG Tianyu</a></li>
              <li><a href="https://gitee.com/lulihaha" target="_blank">HUANG Dongqiao</a></li>
            </ul>
            <p>本项目前端及后端功能开发由<a href="https://github.com/VincentWei" target="_blank" rel="noopener">WEI Yongming</a>完成。</p>
            <h4 class="mb-3">赞助人</h4>
            <p>本项目的成功开发和实施离不开如下赞助人的支持：</p>
            <ul>
                <li><a href="https://github.com/yongkangl" target="_blank" rel="nofollow noreferrer noopener">LIU Yongkang</a></li>
                <li><a href="https://gitee.com/biparadox" target="_blank" rel="nofollow noreferrer noopener">HU Jun</a></li>
                <li><a href="https://github.com/VincentWei" target="_blank" rel="nofollow noreferrer noopener">WEI Yongming</a></li>
            </ul>
            <h4 class="mb-3">许可证</h4>
            <p>考鼎码在线练习场遵循 AGPLv3 许可证发布。</p>
            <p>EC2 Playground - The playground for the Executable Coding Code.<br>
            Copyright (C) 2024, 2025 EC2 Community</p>
            <p>This program is free software: you can redistribute it and/or modify
            it under the terms of the GNU Affero General Public License as
            published by the Free Software Foundation, either version 3 of the
            License, or (at your option) any later version.</p>
            <p>This program is distributed in the hope that it will be useful,
            but WITHOUT ANY WARRANTY; without even the implied warranty of
            MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
            GNU Affero General Public License for more details.</p>
            <p>You should have received a copy of the GNU Affero General Public License
            along with this program.  If not, see <a href="https://www.gnu.org/licenses/" target="_blank" rel="nofollow noreferrer noopener">https://www.gnu.org/licenses/</a>.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
          </div>
        </div>
      </div>
  </div>

<template id="snippetSectionTemplate">
  <li class="mb-1">
    <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0"
        data-bs-toggle="collapse" data-bs-target="#USERNAME-SECTIONNAME-collapse"
        aria-expanded="false">
      SECTIONAME
    </button>
    <div class="collapse program-section" id="USERNAME-SECTIONNAME-collapse">
      <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
      </ul>
    </div>
    </li>
</template>

<template id="mySnippetTemplate">
    <li class="d-flex align-items-center ps-3 pe-2" data-snippet-username="USERNAME" data-snippet-title="SNIPPET-TITLE" data-snippet-digest="SNIPPET-DIGEST">
      <a href="?snippet=SNIPPET-DIGEST" target="_blank" class="link-dark text-decoration-none text-truncate rounded"
            data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-html="true" data-bs-title="SNIPPET-DESCRIPTION">SNIPPET-TITLE</a>
      <div class="d-flex ms-auto">
        <button type="button" class="btn-icon mt-0 me-0" onclick="importProgram(this)" aria-label="导入代码" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-title="导入代码到编辑区">
          <i class="bi bi-arrow-down-right"></i>
        </button>
        <button type="button" class="btn-icon mt-0 me-0" onclick="copyProgramLink(this)" aria-label="复制分享链接" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-title="复制分享链接到剪贴板">
          <i class="bi bi-link"></i>
        </button>
        <button type="button" class="btn-icon mt-0 me-0 text-danger" onclick="deleteProgram(this)" aria-label="删除此程序" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-title="删除此程序">
          <i class="bi bi-trash"></i>
        </button>
      </div>
    </li>
</template>

<template id="othersSnippetTemplate">
    <li class="d-flex align-items-center ps-3 pe-2" data-snippet-username="USERNAME" data-snippet-title="SNIPPET-TITLE" data-snippet-digest="SNIPPET-DIGEST">
      <a href="?snippet=SNIPPET-DIGEST" target="_blank" class="link-dark text-decoration-none text-truncate rounded"
            data-bs-toggle="tooltip" data-bs-html="true" data-bs-trigger="hover" data-bs-title="SNIPPET-DESCRIPTION">SNIPPET-TITLE</a>
      <div class="d-flex ms-auto">
        <button type="button" class="btn-icon mt-0 me-0" onclick="importProgram(this)" aria-label="导入代码" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-title="导入代码到编辑区">
          <i class="bi bi-arrow-down-right"></i>
        </button>
        <button type="button" class="btn-icon mt-0 me-0" onclick="copyProgramLink(this)" aria-label="复制分享链接" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-title="复制分享链接到剪贴板">
          <i class="bi bi-link"></i>
        </button>
        <button type="button" class="btn-icon mt-0 me-0" onclick="toggleStar(this)" aria-label="点亮星星" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-title="支持作者，点亮星星！">
          <i class="bi bi-star"></i>
        </button>
      </div>
    </li>
</template>

 <aside id="programListPanel" class="d-flex flex-nowrap shadow">

  <div class="flex-shrink-0 w-100 p-3 bg-white">
    <div class="d-flex justify-content-between pb-3 mb-3 border-bottom">
      <h3>
        <a href="#" class="link-dark text-decoration-none">仓库</a>
      </h3>
      <div>
        <button type="button" class="btn-refresh" aria-label="更新"
            data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-title="刷新程序清单"
            onclick="refreshRepository(null)">
          <i class="bi bi-arrow-clockwise"></i>
        </button>
        <button type="button" class="btn-close" aria-label="关闭"
            onclick="dismissRepoPanel()">
        </button>
      </div>
    </div>

    <div class="overflow-y-auto" style="height: calc(100% - 60px)">
      <div id="mySnippetsWrap">
        <h4>我<small class="fw-lighter ps-1" id="myUsername">未登录</small></h4>
        <ul class="list-unstyled ps-0" id="mySnippets">
          <li>（空空如也）</li>
        </ul>
      </div>
      <div id="searchedSnippetsWrap" style="display:none;">
        <h4 contenteditable="plaintext-only" onblur="searchSnippets(this)">输入学生姓名搜索</h4>
        <ul class="list-unstyled ps-0" id="searchedSnippets">
          <li>（空空如也）</li>
        </ul>
      </div>
      <h4 class="border-top pt-3 my-3">最新</h4>
      <ul class="list-unstyled ps-0" id="latestSnippets">
        <li>（空空如也）</li>
      </ul>
      <h4 class="border-top pt-3 my-3">老师</h4>
      <ul class="list-unstyled ps-0" id="teachersSnippets">
        <li>（空空如也）</li>
      </ul>
    </div>
  </div>
 </aside>

  <header>
    <div class="px-3 py-2 text-bg-dark">
      <div class="container">
        <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between">
          <ul class="nav col-lg-auto my-2 justify-content-center my-md-0 text-small">
            <li>
              <button class="nav-link text-white"
                    onclick="showRepository(this)">
                <i class="bi bi-box-seam d-block mx-auto mb-1 cmd-icon"></i>
                <span class="d-none d-md-block">仓库</span>
              </button>
            </li>
            <li>
              <button class="nav-link text-white" onclick="runCode(this)">
                <i class="bi bi-caret-right-fill d-block mx-auto mb-1 cmd-icon"></i>
                <span class="d-none d-md-block">运行</span>
              </button>
            </li>
            <li>
              <button class="nav-link text-white" onclick="clearCode()">
                <i class="bi bi-eraser-fill d-block mx-auto mb-1 cmd-icon"></i>
                <span class="d-none d-md-block">清空</span>
              </button>
            </li>
            <li id="btnShowCodeInfo" style="display:none">
              <button class="nav-link text-white" onclick="showCodeInfo()">
                <i class="bi bi-info-circle d-block mx-auto mb-1 cmd-icon"></i>
                <span class="d-none d-md-block">信息</span>
              </button>
            </li>
          </ul>
          <div class="nav col-md-auto mb-2 justify-content-center mb-md-0 text-info">
            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="d-none d-md-block" viewBox="0 0 31.75 31.75">
<path style="stroke-width:0.221258" d="m 5.2,4.341225 9.729996,5.55243 0.380004,0.70714 v 2.10756 l -0.39527,0.16712 -7.9951565,-4.76368 v 5 l 8.0480225,4.79518 0.342404,0.60001 v 2.32179 l -0.355314,0.15571 -8.0351125,-4.87269 v 4 l 7.9988705,4.76588 0.391556,0.57133 V 27.7 L 14.941143,27.900035 5.2,22.329515 l -0.3783745,-0.73071 -7e-7,-16.97586 z" />
<path style="stroke-width:0.22526;stroke-dasharray:none" d="M 16.588272,9.884875 26.36,4.563895 27.055,5.231305 C 27.03253,6.5315207 27.0451,7.9537703 27.05514,9.254 L 26.711,9.793 25.993636,10.174 25.61,9.836 V 7.911715 l -7.221439,4.17657 v 12 L 25.61,20.249 v -1.657 l 0.396094,-0.716 0.70447,-0.381 0.344436,0.35 v 3.744 L 26.672223,22.33 16.628893,27.900035 16.220824,27.7 V 10.577285 Z" />
<path style="stroke-width:0.102683;stroke-dasharray:none" d="m 20.021988,13.160952 3.956025,-2.321905 0.512827,0.303 c -0.01044,0.585414 -0.0047,1.31158 0,1.897 l -0.153061,0.286584 -0.361505,0.155251 -0.373434,-0.19356 v -0.824275 l -3.111636,1.923323 v 5.402916 L 23.60284,18.144047 V 17.328 l 0.258223,-0.462 0.454937,-0.245 0.17484,0.208 v 1.84 L 23.893,19.336047 20.110858,21.377155 19.49084,20.89904 v -6.859993 z" />
<path style="stroke-width:0.264583" d="m 15.220824,7.088285 -0.386003,0.99999" />
            </svg>
          </div>
          <ul class="nav col-lg-auto my-2 justify-content-center my-md-0 text-small">
            <li>
              <button class="nav-link text-white" onclick="downloadCode()">
                <i class="bi bi-download d-block mx-auto mb-1 cmd-icon"></i>
                <span class="d-none d-md-block">保存</span>
              </button>
            </li>
            <li>
              <button class="nav-link text-white" onclick="tryToShareCode()">
                <i class="bi bi-cloud-upload d-block mx-auto mb-1 cmd-icon"></i>
                <span class="d-none d-md-block">分享</span>
              </button>
            </li>
            <li>
              <button class="nav-link text-white" data-bs-toggle="modal" data-bs-target="#helpModal" >
                <i class="bi bi-question-circle d-block mx-auto mb-1 cmd-icon"></i>
                <span class="d-none d-md-block">帮助</span>
              </button>
            </li>
            <li>
              <button class="nav-link text-white" data-bs-toggle="modal" data-bs-target="#aboutModal">
                <i class="bi bi-people-fill d-block mx-auto mb-1 cmd-icon"></i>
                <span class="d-none d-md-block">关于</span>
              </button>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </header>

  <aside id="outputPanel" class="p-1 text-white bg-dark shadow-lg">
    <div class="d-flex justify-content-between border-bottom">
      <div>
      </div>
      <div>
        <h3>输出</h3>
      </div>
      <div data-bs-theme="dark">
        <button type="button" class="btn-close" aria-label="关闭"
            onclick="getElementById('outputPanel').style.setProperty('right', '-50%')">
        </button>
      </div>
    </div>
    <pre id="output" class="border border-secondary-subtle m-1 p-2 overflow-x-auto overflow-y-auto" style="height: calc(100% - 50px)"></pre>
  </aside>

  <main class="contents">
    <div class="code-editor">
        <textarea id="codeEditor"></textarea>
    </div>
  </main>

  <footer style="display:none;">
    <address class="text-center">
      <a target="_blank" href="http://beian.miit.gov.cn/">京ICP备05046847号-7</a>；
      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802032210"><img src="/备案图标.png">京公网安备 11010802032210号</a>；经营许可证号：110108004781535
    </address>
  </footer>

  <!-- 弹窗结构 -->
  <div id="clapModal" class="clapping-modal">
    <div class="clapping-modal-content">
      <img src="assets/clap.gif" alt="Clapping GIF"/>
    </div>
  </div>

  <!-- include assets of bootstrap -->
  <script src="bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

  <!-- include assets of codemirror -->
  <script src="codemirror-5.65.18/lib/codemirror.js"></script>
  <script src="codemirror-5.65.18/mode/ec2/ec2.js"></script>
  <script src="codemirror-5.65.18/addon/hint/show-hint.js"></script>
  <!-- <link rel="stylesheet" href="codemirror-5.65.18/addon/lint/lint.css -->
  <script src="codemirror-5.65.18/addon/lint/lint.js"></script>

  <!-- include site-specific assets -->
  <script src="config/globals.js"></script>
  <script src="js/playground.js"></script>
  <script src="js/wasm.js"></script>
</body>

</html>

